<template>
	<view class="user_index">
		<view class="user" @click="handleUserInfo">
			<view class="user-info" v-if="isLogin">
				<u-avatar :src="userInfo.avatar" size="120"></u-avatar>
				<text style="margin-left: 20rpx;font-size: 40rpx;">{{userInfo.nickname}}</text>
				<view v-if="vip" class="VIP">
					<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/4584fa73573c4fdd88c922f4a135f4f2cxrnk1lwb7.png"></image>
				</view>
			</view>
			<view class="user-info" v-else>
				<u-avatar :src="PersonLog" size="120"></u-avatar>
				<text style="margin-left: 20rpx;font-size: 40rpx;">请登录</text>
				<view v-if="vip" class="VIP">
					<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/16/ee7c2d205bd149e79575e9843c950297u44do0doi9.png"></image>
				</view>
			</view>
			<view class="tip">
				<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/be4e87c015f54a84b93c80d56491e8c9zli5mkbzuy.png"></image>
			</view>
		</view>
		<view class="member">
			<view class="title">
				曼德呵护守护VIP会员
				<view v-if="vip" class="count">
					待使用权益数{{remainTimes}}
				</view>
				<view v-else class="count">
					您还不是Minder会员，开通解锁您的会员权益
				</view>
			</view>
			<view class="shop">
				<button v-if="!vip" @click="pay" class="btn">立即购买</button>
			</view>
		</view>
		<view class="index_container">
			<view @click="handleClick(item)" v-for="(item,index) in menuList" :key="index" class="item_container">
				<image :src="item.icon" mode=""></image>
				<view v-if="item.title==='待付款'&&noPayOrderTotal>0" class="square_tips">
					{{noPayOrderTotal}}
				</view>
				<view class="index_title">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="index_info">
			<view v-for="(item,index) in infoList" @click="handleTurn(item)" :key="item" class="item__info">
				<view class="intent">
					{{item}}
				</view>
				<view class="">
					<image :src="right" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import PersonLog from '@/pages/tabBar/static/images/user/woman.png'
	import peopleLog from '@/pages/tabBar/static/images/user/people.png'
	import scanLog from '@/pages/tabBar/static/images/user/scan.png'
	import seetingLog from '@/pages/tabBar/static/images/user/setting.png'
	import left from '@/pages/tabBar/static/images/user/left.png'
	import right from '@/pages/tabBar/static/images/user/right.png'

	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getLogout,
		getMenuList
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	import {
		getOrder,
	} from '@/api/order.js';
import { memberDetail } from '../../api/menber'
	export default {
		data() {
			return {
				remainTimes:0,
				vip:null,
				PersonLog: PersonLog,
				peopleLog: peopleLog,
				scanLog: scanLog,
				seetingLog: seetingLog,
				left: left,
				right: right,
				menuList: [{
						title: '帖子',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/d6b1e44804d846e1be4179b40baf9c4ftcm3fzelhl.png',
						url: '/pages/forum/article/article'
					},
					{
						title: '关注',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/60312be9af484355a082b42a512fd947koop5bod4y.png',
						url: '/pages/user/attention/attention?tap=0'
					}, {
						title: '粉丝',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/6da6026a8547409185bf6a90b3286d25h4eohp3pux.png',
						url: '/pages/user/attention/attention?tap=1'
					}, {
						title: '赞',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/a6ead221d7c04a7eaad729ef123d8e96dtyiles46m.png',
						url: '/pages/forum/good/good'
					}, {
						title: '待付款',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/795e8c7ca61146dfbbf07ffb882b9900sro3gv3o2r.png',
						url: '/pages/user/prepayment/prepayment'
					}, {
						title: '退货/退款',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/2f16dc1946744fe1829e9446375850a5ogh1crhu5j.png',
						url: '/pages/user/order/refund'
					}, {
						title: '全部订单',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/5ebf9d997a0d443999dc60675375555331tta47sep.png',
						url: '/pages/user/order/all_order'
					}, {
						title: '客服',
						icon:'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/0bf06bd2f42f44c590d8f0c6152d514ceh4qq1oula.png',
					},
				],
				infoList: ['浏览记录', '经期设置', '开通/续费会员', '会员退款','个人信息','退出登录'],
				imgUrls: [],
				userMenu: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				MyMenus: [],
				wechatUrl: [],
				servicePic: 'static/images/customer.png',
				sysHeight: sysHeight,
				noPayOrderTotal: 0, //未支付数量
				// #ifdef MP
				pageHeight: '100%',
				// #endif
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin()
				//#endif
			}
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		onLoad() {
			let that = this;
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			that.$set(that, 'MyMenus', app.globalData.MyMenus);
			if (!this.$Cache.has('cityList')) this.getCityList();
			if (that.isLogin == false) {
				// #ifdef H5
				//toLogin()
				// #endif
			}
		},
		onShow: function() {
			this.getOrderList({
				...this.pageParams,
				'status': -1
			});
			let that = this;
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			if (that.isLogin) {
				this.getMyMenus();
				// this.setVisit();
				// this.getOrderData();
				this.$store.dispatch('USERINFO');
			} else {
				//toLogin();
			}
			
			memberDetail(uni.getStorageSync('UID')).then(res=>{
				this.remainTimes=0
				if(res.data.length>0){
					res.data.forEach(item=>{
						this.remainTimes+=item.remainTimes
						this.vip = true
					})
				}else{
					this.remainTimes=0
					this.vip = false
				}
			})
		},
		methods: {
			outLogin: function() {
				let that = this;
					uni.showModal({
						title: '提示',
						content: '确认退出登录?',
						success: function(res) {
							if (res.confirm) {
								getLogout()
									.then(res => {
										that.$store.commit("LOGOUT");
										uni.navigateTo({
											url: '/pages/user/login/index',
										});
									})
									.catch(err => {
										console.log(err);
									});
							} else if (res.cancel) {
							}
						}
					});
			},
			scanf() {
				uni.scanCode({
					autoZoom: true,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			handleUserInfo() {
				if (!this.isLogin) {
					toLogin()
				} else {
					uni.navigateTo({
						url: '/pages/user/user_info/user_info'
					})
				}
				// uni.navigateTo({
				// 	url: '/pages/user/user_info/user_info'
				// })
			},
			getOrderList(data) {
				getOrder(data).then(res => {
					this.noPayOrderTotal = res.data.total
				}).catch(res => {})
			},
			handleClick(item) {
				console.log(item)
				if (item.title === "客服") {
					uni.showToast({
						title: '模块建设中',
						icon: 'error'
					})
					return
				}
				uni.navigateTo({
					url: item.url
				})
			},
			handleTurn(item) {
				switch (item) {
					case "个人信息":
						uni.navigateTo({
							url: '/pages/user/user_info/user_info'
						})
						break;
					case "退出登录":{
						this.outLogin()
						break;
					}
					case "经期设置":
						uni.navigateTo({
							url: '/pages/user/period_setup/period_setup'
						})
						break;
					case "开通/续费会员":
						uni.navigateTo({
							url: '/pages/user/member/member'
						})
						break;
					case "会员退款":{
						if(!this.vip) {
							uni.showToast({
								title: '未开通会员服务',
								icon: 'error'
							})
							break;
						}
						uni.navigateTo({
							url: '/pages/user/member/sales'
						})
						break;
					}
					case "浏览记录":
						uni.navigateTo({
							url: '/pages/user/history/index'
						})
						break;
				}
			},
			navito(e) {
				window.location.href = 'https://' + e;
			},
			kefuClick() {
				location.href = this.chatUrl;
			},
			// getOrderData() {
			//     let that = this;
			//     orderData().then(res => {
			//         that.orderMenu.forEach((item, index) => {
			//             switch (item.title) {
			//                 case '待付款':
			//                     item.num = res.data.unPaidCount
			//                     break
			//                 case '待发货':
			//                     item.num = res.data.unShippedCount
			//                     break
			//                 case '待收货':
			//                     item.num = res.data.receivedCount
			//                     break
			//                 case '待评价':
			//                     item.num = res.data.evaluatedCount
			//                     break
			//                 case '售后/退款':
			//                     item.num = res.data.refundCount
			//                     break
			//             }
			//         })
			//         that.$set(that, 'orderMenu', that.orderMenu);
			//     })
			// },
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			// 授权回调
			onLoadFun() {
				this.getMyMenus();
				// this.setVisit();
				this.getOrderData();
			},
			pay(){
				uni.navigateTo({
					url:'/pages/user/member/member'
				})
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/app_login/index'
				})
			},
			/**
			 *
			 * 获取个人中心图标
			 */
			getMyMenus: function() {
				let that = this;
				if (this.MyMenus.length) return;
				getMenuList().then(res => {
					that.$set(that, 'MyMenus', res.data.routine_my_menus);
					that.wechatUrl = res.data.routine_my_menus.filter((item) => {
						return item.url.indexOf('service') !== -1
					})
					res.data.routine_my_menus.map((item) => {
						if (item.url.indexOf('service') !== -1) that.servicePic = item.pic
					})
					if (res.data.routine_my_banner) {
						that.imgUrls = res.data.routine_my_banner
					}
				});
			},
			// 编辑页面
			goEdit() {
				console.log(this.isLogin);
				if (this.isLogin == false) {
					toLogin();
				} else {
					console.log("已登录");
					uni.navigateTo({
						url: '/pages/user/user_info/user_info'
					})
				}
			},
			goMenuPage(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					})
				} else {
					// #ifdef MP
					this.openAuto()
					// #endif
				}
			},
			// 获取地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					let oneDay = 24 * 3600 * 1000;
					this.$Cache.setItem({
						name: 'cityList',
						value: res.data,
						expires: oneDay * 7
					}); //设置七天过期时间
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user_index {
		width: 100%;
		background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/16/d70254d070994e8e9d7ca42f12f1fe4fo3ixp0pex5.png');
		// background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: top;
		/* 背景图片居中 */
		background-repeat: no-repeat;
		/* 背景图片不重复 */
		width: 100%;
		height: 100vh;
		position: relative;
		background-size: 100% 100%;
		
		.user{
			height: 220rpx;
			display: flex;
			align-items: flex-end;
			padding: 20rpx 40rpx;
			
			.user-info{
				display: flex;
				align-items: center;
				
				.VIP{
					width: 100rpx;
					height: 40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.tip{
				position: absolute;
				top: 35rpx;
				right: 42rpx;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}


		.member{
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			height: 160rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.title{
				width: 403rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				font-size: 36rpx;
				font-weight: 700;
				
				.count{
					font-size: 24rpx;
					font-weight: 500;
					color: #d4d4d4;
				}
			}
			
			.btn{
				padding: 6rpx 40rpx;
				background-color: #f8687d;
				border-radius: 40rpx;
				color: #fff;
			}
		}
		
		.index_container {
			z-index: 1000;
			width: 95%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			flex-wrap: wrap;
			margin: 0 auto;
			margin-top: 20rpx;

			.item_container {
				z-index: 1001;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				image {
					width: 80rpx;
					height: 80rpx;

				}

				.square_tips {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #fff;
					border-radius: 50%;
					background-color: #f86853;
					position: absolute;
					top: 0;
					right: 20rpx;

				}

				.index_title {
					margin-top: 20rpx;
				}
			}
		}

		.index_info {
			z-index: 1000;
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 0rpx 40rpx;
			
			.item__info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;

				&:last-child{
					border-bottom:none;
				}
				
				.intent {
					font-size: 36rpx;
					padding: 20rpx 0;
					margin: 20rpx 0;
				}

				image {
					width: 20rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>